﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .top {
            width: 1500px;
            margin: 0 auto;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
        }

        #Q-nav {
            
            width: 1500px;
            margin: 0 auto;
            overflow: hidden;
        }
    </style>
    <script src="./jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $(window).scroll(function(){
                // 判断页面滚动距离是否大于第一张图片的高度
                // 如果大于则将第二张图片固定定位，并且修改其左边距以及到顶部的距离为0
                
                if($(document).scrollTop() >= $('#top').height()){
                    $('#Q-nav').css({position:'fixed',
                                    top:0,
                                    marginLeft:$('#Q-nav').offset().left})
                    // 给第三张图片设置一个上边距为第二张图片的高度
                    $('#main').css('marginTop',$('#Q-nav').height())
                }
                // 如果不大于则撤销固定定位，并且去掉第三个盒子到顶部的距离
                else{
                    $('#Q-nav').css('position','')
                    $('#main').css({marginTop:0})
                }
               
            })
        })
    </script>
    
</head>
<body>

    <!--第一张图片-->
    <div class="top" id="top">
        <img src="images/top.png" alt=""/>
    </div>
    <!--第二张图片-->
    <div id="Q-nav">
        <img src="images/nav.png" alt=""/>
    </div>
    <!--第三张图片-->
    <div class="main" id="main">
        <img src="images/main(1).png" alt=""/>
    </div>


</body>
</html>

